import React,{Component} from 'react';
import {
    StyleSheet,
    View,
    ScrollView,
    Text,
    StatusBar,
    Image,
    TouchableWithoutFeedback,
} from 'react-native';
import Header from './header/Header';
export default class MyModel extends Component{
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
         	isNull: false
        };
    }
    render(){
    	const { params } = this.props.navigation.state;
        const {navigate,goBack,state} = this.props.navigation;
        let barHeight = StatusBar.currentHeight;
        return (
            <View style={{
                flex: 1,
                // paddingTop: barHeight, 
                backgroundColor: '#fcf8f9'
            }}>
            	<Header 
        			// hesder标题
        			title='我的尺码' 
        			// hesder是否显示返回按钮
	        		isShowBack={true}
	        		// hesder按钮返回操作
	        		goBack={goBack}
        		/>
				{
					this.state.isNull?
					<View style={{paddingTop: 50, alignItems: 'center'}}>
						<Image 
		                	style={{width: 203, height: 155}} 
		                	source={require('../images/modal-null.png')}
	                	/>
	                	<Text style={{fontSize: 14, color: '#707070'}}>您还没有自己的脚部模型</Text>
	                	<TouchableWithoutFeedback onPress={() => alert('上传模型')}>
		    				<View style={{
		    					width: 187,height: 42,borderRadius: 20,backgroundColor: '#fff',justifyContent: 'center', alignItems: 'center',marginTop: 55,
		    					shadowOffset: {width: 0, height: 5},  
						        shadowOpacity: 0.5,  
						        shadowRadius: 8,  
						        shadowColor: '#ebebeb',  
						        //注意：这一句是可以让安卓拥有灰色阴影  
						        elevation: 4, 
		    				}}>
		    					<Text style={{fontSize: 17, color: '#0000ff', textAlign: 'center'}}>现在上传</Text>
		    				</View>
	    				</TouchableWithoutFeedback>
					</View>
					:
					<ScrollView>
						<View style={{alignItems: 'center', paddingTop: 20, marginBottom: 65}}>
							<View style={{width: 300, height: 230, marginBottom: 45, backgroundColor: '#707070', justifyContent: 'center', alignItems: 'center'}}>
								<Text style={{fontSize: 14, color: '#fff'}}>脚部模型</Text>
							</View>
							<View>
								<View style={{width: 300, paddingTop: 12, paddingBottom: 12, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', borderBottomWidth: 1, borderColor: '#9b999a'}}>
									<Text style={{fontSize: 14, color: '#262626'}}>维度一</Text>
									<Text style={{fontSize: 14, color: '#0000ff'}}>数值</Text>
								</View>
								<View style={{width: 300, paddingTop: 12, paddingBottom: 12, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', borderBottomWidth: 1, borderColor: '#9b999a'}}>
									<Text style={{fontSize: 14, color: '#262626'}}>维度二</Text>
									<Text style={{fontSize: 14, color: '#0000ff'}}>数值</Text>
								</View>
								<View style={{width: 300, paddingTop: 12, paddingBottom: 12, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', borderBottomWidth: 1, borderColor: '#9b999a'}}>
									<Text style={{fontSize: 14, color: '#262626'}}>维度三</Text>
									<Text style={{fontSize: 14, color: '#0000ff'}}>数值</Text>
								</View>
							</View>
							<TouchableWithoutFeedback onPress={() => navigate('ChooseType')}>
			    				<View style={{
			    					width: 300,height: 42,borderRadius: 20,backgroundColor: '#fff',justifyContent: 'center', alignItems: 'center',marginTop: 55,
			    					shadowOffset: {width: 0, height: 5},  
							        shadowOpacity: 0.5,  
							        shadowRadius: 8,  
							        shadowColor: '#ebebeb',  
							        //注意：这一句是可以让安卓拥有灰色阴影  
							        elevation: 4, 
			    				}}>
			    					<Text style={{fontSize: 17, color: '#0000ff', textAlign: 'center'}}>选择定制元素</Text>
			    				</View>
		    				</TouchableWithoutFeedback>
						</View>

						<View style={{paddingLeft: 15, paddingRight: 15}}>
							<View>
								<Text>【推荐】你知道你是什么脚型吗？</Text>
								<Image 
				                	style={{width: '100%', height: 203}} 
				                	source={require('../images/myModalImg.jpg')}
			                	/>
							</View>
						</View>
					</ScrollView>
				}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    
})